<template>
  <view class="bg"></view>
  <view class="head justify-between">
    <view class="left">
      {{ showData?.hotel_name }}
      <image
        @click="getData"
        class="refresh"
        src="@/static/images/room_status/refresh.png"
      ></image>
    </view>
    <view class="right flex">
      <view>
        <image
          class="refresh"
          src="@/static/images/room_status/night.png"
        ></image>
        夜审
      </view>
      <view style="padding-left: 40rpx">
        <image
          class="refresh"
          src="@/static/images/room_status/handover.png"
        ></image>
        交班
      </view>
    </view>
  </view>
  <view class="data" v-if="showData">
    <view class="content justify-between align-center">
      <view class="item">
        <view class="num">
          {{ showData.man_num.toFixed(2) }}
        </view>
        <view class="text">住客数</view>
      </view>
      <view class="item">
        <view class="num">{{ showData.hotel_lv.toFixed(2) }}</view>
        <view class="text">入住率</view>
      </view>
      <view class="item">
        <view class="num blue">{{ showData.chongzhang.toFixed(2) }}</view>
        <view class="text">今冲账</view>
      </view>
    </view>
    <u-divider></u-divider>
    <view class="content justify-between align-center">
      <view class="item">
        <view class="num">{{ showData.today_receive.toFixed(2) }}</view>
        <view class="text">今入在住</view>
      </view>
      <view class="item">
        <view class="num">{{ showData.avgprice.toFixed(2) }}</view>
        <view class="text">在住均价</view>
      </view>
      <view class="item">
        <view class="num blue">{{ showData.prices.toFixed(2) }}</view>
        <view class="text">总房费</view>
      </view>
    </view>
  </view>

  <view class="room" style="min-height: 500px">
    <view class="icon-class flex">
      <view class="icon-item flex-center" @click="chooseRoom([0])">
        <view class="icon"></view>
        <view class="icon-name">空净{{ roomNum([0]) }}</view>
      </view>
      <view
        class="icon-item flex-center"
        @click="chooseRoom([100, 101, 103, 106])"
      >
        <view class="icon" style="background-color: #579ff8"></view>
        <view class="icon-name">住净{{ roomNum([100, 101, 103, 106]) }}</view>
      </view>
      <view class="icon-item flex-center" @click="chooseRoom([102])">
        <view class="icon" style="background-color: #bcc9ff"></view>
        <view class="icon-name">住脏{{ roomNum([102]) }}</view>
      </view>
      <view class="icon-item flex-center" @click="chooseRoom([1, 2])">
        <view class="icon" style="background-color: #c4c9d8"></view>
        <view class="icon-name">空脏{{ roomNum([1, 2]) }}</view>
      </view>
    </view>
    <view class="icon-class flex">
      <view class="icon-item flex-center" @click="chooseRoom([300])">
        <view class="icon" style="background-color: #efac40"></view>
        <view class="icon-name">预订{{ roomNum([300]) }}</view>
      </view>
      <view class="icon-item flex-center" @click="chooseRoom([200, 201])">
        <view class="icon" style="background-color: #ff6c66"></view>
        <view class="icon-name">维修{{ roomNum([200, 201]) }}</view>
      </view>
      <view
        class="icon-item flex-center"
        @click="
          chooseRoom([
            0, 1, 2, 100, 101, 102, 103, 104, 106, 107, 200, 201, 300, 900
          ])
        "
      >
        <view class="icon-name">
          全部{{
            roomNum([
              0, 1, 2, 100, 101, 102, 103, 104, 106, 107, 200, 201, 300, 900
            ])
          }}
        </view>
      </view>
      <view class="icon-item flex-center">
        <view class="icon-name">远期房态</view>
      </view>
    </view>

    <!-- 缺醒页 -->
    <MissingPage v-if="!HomeViews.length"></MissingPage>
    <!-- 显示楼层 -->
    <view v-if="floored">
      <view v-for="(ele, index) in buildingFloor" :key="index">
        <view
          class="building"
          v-if="
            HomeViews.some(
              (a: BuildingFloor) =>
                a.Building == ele.Building && a.Floor == ele.Floor
            )
          "
        >
          {{ ele.buildingFloor }}
        </view>

        <view class="item-class flex">
          <view v-for="item in HomeViews" :key="item.Id">
            <view
              class="item"
              @click="onItem(item)"
              :style="{ backgroundColor: roomColor(item.UseFlag) }"
              v-if="item?.Building == ele.Building && item?.Floor == ele.Floor"
            >
              <view class="roomNum">
                {{ item.Id }}
                <image
                  v-if="item.UseFlag === 104 || item.UseFlag === 107"
                  class="clock"
                  src="@/static/images/room_status/clock.png"
                ></image>
              </view>
              <view
                v-if="
                  item.UseFlag !== 200 &&
                  item.UseFlag !== 201 &&
                  item.UseFlag !== 900
                "
                class="manName"
              >
                {{ item.ReceiveView?.ManName }}
              </view>
              <view
                v-if="
                  item.UseFlag !== 200 &&
                  item.UseFlag !== 201 &&
                  item.UseFlag !== 900
                "
                class="sign flex"
              >
                <view
                  class="owe common"
                  v-if="
                    item.IsLinks
                      ? Summary?.LinkAccounts[item.ReceiveView?.LinkId] < 0
                      : item.ReceiveView?.Yj +
                          item.ReceiveView?.Ysq -
                          item.ReceiveView?.Xf <
                        0
                  "
                >
                  欠
                </view>
                <view
                  class="leave common"
                  v-if="
                    item.YuLi || item.UseFlag === 104 || item.UseFlag === 107
                  "
                >
                  离
                </view>
                <view class="sweep common" v-if="item.UseFlag === 102">扫</view>
              </view>
              <view
                v-if="item.UseFlag === 200 && item.UseFlag === 201"
                class="repair"
              >
                <image
                  class="repair-img"
                  src="@/static/images/room_status/repair.png"
                ></image>
              </view>
              <view v-if="item.UseFlag === 900" class="repair">
                <image
                  class="repair-img"
                  src="@/static/images/room_status/lock.png"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 不显示楼层 -->
    <view v-if="!floored" class="unfloored">
      <view class="item-class flex">
        <view v-for="item in HomeViews" :key="item.Id">
          <view
            class="item"
            @click="onItem(item)"
            :style="{ backgroundColor: roomColor(item.UseFlag) }"
          >
            <view class="roomNum">
              {{ item.Id }}
              <image
                v-if="item.UseFlag === 104 || item.UseFlag === 107"
                class="clock"
                src="@/static/images/room_status/clock.png"
              ></image>
            </view>
            <view
              v-if="
                item.UseFlag !== 200 &&
                item.UseFlag !== 201 &&
                item.UseFlag !== 900
              "
              class="manName"
            >
              {{ item.ReceiveView?.ManName }}
            </view>
            <view
              v-if="
                item.UseFlag !== 200 &&
                item.UseFlag !== 201 &&
                item.UseFlag !== 900
              "
              class="sign flex"
            >
              <view
                class="owe common"
                v-if="
                  item.IsLinks
                    ? Summary?.LinkAccounts[item.ReceiveView?.LinkId] < 0
                    : item.ReceiveView?.Yj +
                        item.ReceiveView?.Ysq -
                        item.ReceiveView?.Xf <
                      0
                "
              >
                欠
              </view>
              <view
                class="leave common"
                v-if="item.YuLi || item.UseFlag === 104 || item.UseFlag === 107"
              >
                离
              </view>
              <view class="sweep common" v-if="item.UseFlag === 102">扫</view>
            </view>
            <view
              v-if="item.UseFlag === 200 && item.UseFlag === 201"
              class="repair"
            >
              <image
                class="repair-img"
                src="@/static/images/room_status/repair.png"
              ></image>
            </view>
            <view v-if="item.UseFlag === 900" class="repair">
              <image
                class="repair-img"
                src="@/static/images/room_status/lock.png"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <Popup
    ref="popup"
    :popup_data="popup_data"
    :Summary="Summary"
    @refresh="getData"
  ></Popup>
</template>

<script lang="ts" setup>
import { getUserInfo } from '@/storage/login'
import Popup from './components/popup.vue'
import MissingPage from './components/missing-page.vue'
import { onShow } from '@dcloudio/uni-app'
import {
  ViewsV2,
  INF_ViewsV2_res,
  INF_HomeViews_info,
  INF_Summary
} from '@/api/server/v2/home'
import { getHomeview } from '@/api/group/home'
import { GetGlobalVal } from '@/api/server/v1/config'
import { ref, computed } from 'vue'

const popup_data = ref<INF_HomeViews_info>()
const HomeViews: any | Array<INF_HomeViews_info> = ref<
  Array<INF_HomeViews_info>
>([])
const Summary = ref<any>()
const popup = ref<InstanceType<typeof Popup> | null>(null)
const building = ref<string[]>([])
const floor = ref<string[]>([])
type BuildingFloor = {
  buildingFloor: string | number
  Floor: string | number
  Building: string | number
}
const buildingFloor = ref<Array<BuildingFloor>>([])
const aboriginalHomeViews = ref<Array<INF_HomeViews_info>>()

const chooseRoom = (num: Array<number>) => {
  HomeViews.value = aboriginalHomeViews.value?.filter(
    (ele: INF_HomeViews_info) => num.includes(ele.UseFlag)
  )
  // console.log(HomeViews.value, 'HomeViews')
}

// VC(空)=0
// VD(脏)=1
// CONFIRM(待确认状态)=2
// CI(入住)=100
// OC(住净)=101
// OD(住脏)=102
// ED(预离)=103
// DU(时房)=104
// HU(自用)=105
// LSG(长住)=106
// DAY(日租)=107
// OOO(维修)=200
// OOS(小维修)=201
// OOT(保留,预订已确认)=300
// LOCK(手动锁定)=900
// 点击房态
const onItem = function (item: INF_HomeViews_info) {
  switch (item.UseFlag) {
    case 0:
      if (popup.value) popup.value.isEmptinessClean = true
      break
    case 100: // 100 -今日入住
    case 101: // 101 -住净
    case 103: // 103 -预离
    case 106: // 106 -长包房
      if (popup.value) popup.value.isLiveClean = true
      break
    case 102:
      if (popup.value) {
        popup.value.isLiveDirty = true
      }
      break
    case 1:
    case 2:
      if (popup.value) popup.value.isEmptinessDirty = true
      break
    case 300:
      if (popup.value) popup.value.isBooked = true
      break
    case 200: // 200-维修房
    case 201: // 201-维修房
    case 900: // 900-锁房
      if (popup.value) popup.value.isLocked = true
      break
    case 104: // 时房
    case 107: // 长租
      if (popup.value) popup.value.isClocked = true
      break
    default:
      break
  }
  popup_data.value = item
}

// 房间数量
const roomNum = (num: Array<number>) => {
  return num.reduce((acc: number, cur: number) => {
    return (
      acc +
      HomeViews.value.filter((item: INF_HomeViews_info) => item.UseFlag === cur)
        .length
    )
  }, 0)
}
// 房间颜色
const roomColor: (key: number) => string = (key) => {
  let color: string = ''
  // 100 -今日入住 / 101 -住净 / 102 -住脏 / 103 -预离 / 104 107 -钟点房  / 105 -自用|免费 / 106 -长包房 /900 -锁房/ 200 201 -维修房
  switch (key) {
    case 0: // 净房
      color = '#6FC849'
      break
    case 100: // 100 -今日入住
    case 101: // 101 -住净
    case 103: // 103 -预离
    case 106: // 106 -长包房
      color = '#579FF8'
      break
    case 102: // 102 -住脏
      color = '#BCC9FF'
      break
    case 1: // 1-脏房
    case 2: // 2-脏房
      color = '#C4C9D8'
      break
    case 300: // 300-预订
      color = '#EFAC40'
      break
    case 200: // 200-维修房
    case 201: // 201-维修房
    case 900: // 900-锁房
      color = '#FF6C66'
      break
    default:
      break
  }
  return color
}

const showData = ref()
const floored = ref(false)
const getData = async () => {
  const result: any = await GetGlobalVal()
  floored.value = result.ConfigEx.Floored

  const res = await getHomeview(getUserInfo().HotelId)
  showData.value = res

  ViewsV2().then((res) => {
    const result: INF_ViewsV2_res = res as INF_ViewsV2_res
    HomeViews.value = result.HomeViews
    aboriginalHomeViews.value = result.HomeViews
    Summary.value = result.Summary
    // console.log(HomeViews.value)
    building.value = Array.from(
      new Set([...HomeViews.value].map((x) => x.Building))
    ).sort((a, b) => a - b)
    floor.value = Array.from(
      new Set([...HomeViews.value].map((x) => x.Floor))
    ).sort((a, b) => a - b)
    const buildingFloorType = []
    for (let i = 0; i < building.value.length; i++) {
      for (let j = 0; j < floor.value.length; j++) {
        buildingFloorType.push(building.value[i] + '-' + floor.value[j])
      }
    }
    const buildingFloorArr = Array.from(new Set(buildingFloorType)).map(
      (buildingFloor) => {
        const [building, floor] = buildingFloor.split('-')
        return {
          buildingFloor,
          Floor: parseInt(floor),
          Building: parseInt(building)
        }
      }
    )
    buildingFloor.value = buildingFloorArr.filter(
      (objA) =>
        aboriginalHomeViews.value?.some(
          (objB) =>
            objA.Building.toString() == objB.Building &&
            objA.Floor == objB.Floor
        )
    )
    // console.log(buildingFloor.value)
  })
}

onShow(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.bg {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  height: 306rpx;
  background: #579ff8;
  position: absolute;
  z-index: 1;
}
.head {
  width: 92%;
  position: relative;
  z-index: 1;
  height: 94rpx;
  line-height: 94rpx;
  padding-left: 32rpx;
  color: #ffffff;
  .refresh {
    width: 28rpx;
    height: 28rpx;
  }
}
.data {
  height: 282rpx;
  margin: 0 20rpx;
  position: relative;
  z-index: 1;
  border-radius: 4rpx;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
  background-color: #fff;

  .content {
    box-sizing: border-box;
    height: 141rpx;
    padding: 0 36rpx;
    .item {
      text-align: center;
      // padding-right: 92rpx;
      width: 212rpx;
      border-right: 1rpx #e5e5e5 solid;
      .num {
        font-weight: 500;
      }
      .text {
        font-size: 24rpx;
      }
    }
    .item:nth-child(3) {
      border-right: 0;
    }
  }
}
.room {
  margin-top: 28rpx;
  background-color: #fff;
  .icon-class {
    height: 28rpx;
    padding: 36rpx 10rpx 0 20rpx;
    .icon-item {
      height: 30rpx;
      width: 172rpx;
      .icon {
        width: 16rpx;
        height: 16rpx;
        border-radius: 8rpx;
        background-color: #6fc849;
      }
      .icon-name {
        margin-left: 6rpx;
        font-size: 28rpx;
      }
    }
    .icon-item:nth-child(n + 5) {
      padding-right: 10rpx;
    }
  }
  .building {
    padding: 50rpx 0 22rpx 32rpx;
  }
  .item-class {
    padding: 0 10rpx 0 22rpx;
    flex-wrap: wrap;
    .item {
      width: 135rpx;
      height: 136rpx;
      margin-right: 8rpx;
      margin-bottom: 8rpx;
      background: #f9cad7;
      border-radius: 8rpx;
      .roomNum {
        font-size: 28rpx;
        padding-top: 10rpx;
        margin-left: 8rpx;
        .clock {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .manName {
        font-size: 24rpx;
        margin: 8rpx 0 14rpx 8rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .sign {
        margin: 0 0 14rpx 8rpx;
        font-size: 20rpx;
        .common {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20rpx;
          width: 24rpx;
          height: 24rpx;
          border-radius: 4rpx;
          margin-right: 6rpx;
        }
        .owe {
          background: #ef645f;
        }
        .leave {
          background: #f8d94a;
        }
        .sweep {
          background-color: #edeff2;
        }
      }
      .repair {
        display: flex;
        justify-content: center;
        margin-top: 18rpx;
        .repair-img {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }
}
.unfloored {
  margin-top: 40rpx;
}
:deep(.u-divider) {
  margin: 0 30rpx !important;
}
</style>
